<template>
	<view class="main">
		<view class="heal-title">
			<title :title="title"></title>
			<view class="search" :class="isTitle ? 'search-bg' : 'search-bgc'" @tap="jumpSearch">
				<image src="../../static/home/seach.png" mode=""></image>
				<input v-model="from.keyword" type="text" disabled="true" class="search-input"
					placeholder="根据科室、姓名找医生" />
				<view class="vertical">
				</view>
				<view class="search-btn" :class="isTitle ? 'search-bgc' : 'search-bg'">
					搜索
				</view>
			</view>
			<view class="hos-tit">
				<image :src="titleImg" mode=""></image>
				<view class="tit-text">
					<text>成都西南中医医院</text>
					<view class="">
						成都市金牛区一环路西三段抚琴西北街6号
						<!-- <image :src="dingImg" mode=""></image> -->
					</view>
				</view>
			</view>
		</view>


		<view class="box">
			<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y scroll-left" @scrolltoupper="upper"
				@scroll="scroll" @scrolltolower="lower">
				<view class="box-left">
					<view class="left" v-for="(item,index) in sort" :key="item,id" @click="department(item,index)">
						<text>{{item.title}}</text>
						<u-icon size="32" name="arrow-right" color="#808080"></u-icon>
					</view>
				</view>
			</scroll-view>

		</view>
	</view>



</template>

<script>
	import config from "../../utils/config";
	import {
		toast,
		getStore,
		setStore,
		removeStore
	} from "@/utils/index";
	import title from '../../components/title.vue';
	import card from '../../components/card.vue';
	import {
		listDep
	} from '../../service/api.js'
	export default {
		data() {
			return {
				title: "预约挂号",
				titleImg: config.ossHost + "2024/12/23/f0ed89db09b448a7bbb3a9d88be573b9.png",
				dingImg: config.ossHost + "2024/12/31/b30195c88e1c41f08a1cb1563d2724f4.png",
				sort: [
				],
				params: {
					pageNum: 1,
					pageSize: 10

				}

			}
		},
		components: {
			title,
			card
		},
		onLoad() {
			this.getlistDep();
		},
		methods: {
			//跳转搜索界面
			jumpSearch() {
				uni.navigateTo({
					url: '/preLoading/search'
				})
			},
			department(item) {
				setStore("office", JSON.stringify(item));
				uni.navigateTo({
					url: `/integration/doctorsList/index?itemid=${item.id}&itemtitle=${item.title}`
				})
			},
			//获取科室
			async getlistDep() {
				let res = await listDep(this.params);
				if (res.code == 200) {
					this.sort = res.rows
				}


			},

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F5F3F0;
		color: #1A1A1A;

		.heal-title {
			background: #fff;

		}



		.box {
			margin-top: 1rpx;
			display: flex;

			.scroll-Y {
				background: #F5F3F0;
				height: calc(100vh - 485rpx);
				padding: 24rpx;

				.box-left {
					background: #fff;
					border-radius: 16rpx 16rpx 0 0;
					padding: 0 24rpx;

					.left {
						display: flex;
						justify-content: space-between;
						font-weight: 500;
						font-size: 32rpx;

						height: 90rpx;
						line-height: 90rpx;
						border-bottom: 1rpx solid #E6E6E6;


					}

					.left:last-child {
						border: none;
					}




				}


			}

			.scroll-left {
				background: #F5F3F0;

				border-radius: 16rpx 16rpx 0 0;
			}
		}

		.hos-tit {
			padding: 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 96rpx;
				height: 96rpx;
			}

			.tit-text {
				margin-left: 24rpx;

				text {
					font-weight: bold;
					font-size: 32rpx;
					color: #1A1A1A;
				}

				view {
					margin-top: 8rpx;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #4D4D4D;

					image {
						margin-left: 8rpx;
						width: 24rpx;
						height: 27rpx;
					}
				}
			}
		}

		.search {
			width: 654rpx;
			margin-left: 24rpx;
			padding: 0 24rpx;
			height: 64rpx;
			background-color: #f5f3f0;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			input {
				font-size: 24rpx;
				color: #B3B3B3;
				width: 525rpx;
			}

			.vertical {
				height: 25rpx;
				border-left: 1rpx solid #808080;
				margin: 0 20rpx;

			}

			.search-btn {
				font-size: 24rpx;
				color: #4D4D4D;
				background-color: #fff;
				width: 72rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;

				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.between {
		width: 100%;
		height: 24rpx;
		background-color: #f5f3f0;
	}

	.box-empty {
		height: calc(100vh - 291rpx);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>